<template>
  <view v-if="deliveryList.length > 0">
    <z-tabs
      :list="deliveryList"
      @change="onChangeTabs"
      class="tabs"
      v-if="deliveryInfo.length > 1"
      :scroll-count="1"
    />
    <view class="body">
      <!-- 商品详情 -->
      <view class="delivery">
        <view class="delivery-goods-list">
          <view class="goods-item" v-for="(goods, idx) in deliveryInfo[tabIndex].detail" :key="idx">
            <image class="goods-img" :src="fullUrl(goods.order_detail.image)" alt="Product Image" />
            <view class="title">Total {{ goods.delivery_num }} items</view>
          </view>
        </view>
        <!-- 物流信息 -->
        <view class="delivery-info">
          <view v-if="deliveryInfo[tabIndex].delivery_company">
            <view class="info-item">
              <view class="item-label">Shipping Company: </view>
              <view class="item-content">{{ deliveryInfo[tabIndex].delivery_company.name }}</view>
            </view>
            <view class="info-item">
              <view class="item-label">Tracking Number: </view>
              <view class="item-content">{{ deliveryInfo[tabIndex].delivery_no }}</view>
              <view class="item-content">
                <button class="copy-button" @tap="onCopy(deliveryInfo[tabIndex].delivery_no)">
                  Copy
                </button>
              </view>
            </view>
            <view class="info-item">
              <view class="item-label address">Delivery Address: </view>
              <view class="item-content">
                {{ deliveryInfo[tabIndex].order_address.full_address }}
              </view>
            </view>
          </view>
          <view v-else>
            <view class="info-item">
              <view>No Shipping Required</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 物流轨迹 -->
    <view class="delivery-tracks" v-if="deliveryList[tabIndex].value.length > 0">
      <view
        v-for="(item, index) in deliveryList[tabIndex].value"
        :key="index"
        class="track-item"
        :class="{ start: index === 0, end: index === deliveryList[tabIndex].value.length - 1 }"
      >
        <view class="track-item-content">
          <view class="item-content">
            <text>{{ item.context }}</text>
          </view>
          <view class="item-time">
            <text>{{ item.time }}</text>
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <z-paging-empty-view :empty-view-fixed="false" empty-view-text="No tracking information available" />
    </view>
  </view>

  <view :style="safeBottom" class="bottom"></view>
</template>

<script setup lang="ts">
import { safeBottom } from '@/utils/constants'
import { getOrderDeliveryByIdApi } from '@/api/order'
import type { orderDeliveryResult } from '@/types/order'
import { ref } from 'vue'
import { fullUrl, onShowRefreshData } from '@/utils/common'

const props = defineProps<{
  order_id: string
}>()

let deliveryInfo: orderDeliveryResult[] = []
const deliveryList = ref<any[]>([])
const tabIndex = ref(0)

const onChangeTabs = (index: number) => {
  tabIndex.value = index
}

const onCopy = (deliveryNo: string) => {
  uni.setClipboardData({ data: deliveryNo })
}

onShowRefreshData(async () => {
  const res = await getOrderDeliveryByIdApi(props.order_id)
  deliveryInfo = res.result
  for (let i = 1; i <= deliveryInfo.length; i++) {
    deliveryList.value.push({
      name: 'Package ' + i,
      value: deliveryInfo[i - 1].delivery_tracks,
    })
  }
})
</script>

<style lang="scss">
page {
  background-color: #f6f6f6;
}

.body {
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.delivery {
  padding: 10rpx;
  background-color: #fff;

  .delivery-goods-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
    margin-bottom: -30rpx;

    .goods-item {
      position: relative;
      border-radius: 8rpx;
      overflow: hidden;
      width: 130rpx;
      height: 130rpx;
      margin-bottom: 30rpx;
      margin-left: 18rpx;
    }

    .goods-img {
      display: block;
      width: 100%;
      height: 100%;
    }

    .title {
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 4rpx 0;
      font-size: 24rpx;
    }
  }

  .delivery-info {
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    padding: 20rpx;
  }

  .info-item {
    display: flex;
    font-size: 24rpx;

    .copy-button {
      display: flex;
      height: 34rpx;
      font-size: 24rpx;
      align-items: center;
      margin-left: 20rpx;
      border-radius: 50rpx;
      border: 1rpx solid #c1c1c1;
    }
  }

  .item-label {
    color: #9d9d9d;
    margin-right: 20rpx;
    white-space: nowrap;
  }

  .item-content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 26rpx;
  }
}

.track {
  font-size: 40rrpx;
}

.delivery-tracks {
  padding: 30rpx;
  background-color: #fff;
  border-radius: 25rpx;

  .track-item {
    position: relative;
    padding-left: 20rpx;
    padding-bottom: 25rpx;
    border-left: 4rpx solid #ccc;

    &.start {
      border-left: 5rpx solid red;
      &:after {
        background-color: red;
        top: 0;
      }
    }

    &.end {
      padding-bottom: 0rpx;
      border-left: none;
      &::after {
        left: -13rpx;
      }
    }

    &:after {
      content: ' ';
      display: inline-block;
      position: absolute;
      left: -9px;
      top: 0rpx;
      width: 24rpx;
      height: 24rpx;
      border-radius: 40rpx;
      background: #bdbdbd;
      border: 2rpx solid #fff;
    }

    .track-item-content {
      position: relative;
      padding: 20rpx 20rpx;
      background-color: #f4f4f4;
      border-radius: 20rpx;

      .item-content {
        font-size: 27rpx;
        padding-bottom: 12rpx;
      }

      .item-time {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.bottom {
  height: 50rpx;
}
</style>
